<template>
  <div class="content">
    <el-dialog :visible.sync="isShow" width="1200px">
      <el-tabs tab-position="left" style="height: 600px;" v-model="currentTab" @tab-click="tabClick">
        <el-tab-pane label="商品列表" name="itemList">
          <selectItemList ref="selectItemList"></selectItemList>
        </el-tab-pane>
        <el-tab-pane label="单个商品" name="item">
          <selectItem ref="selectItem"></selectItem>
        </el-tab-pane>
        <el-tab-pane label="功能" name="function">
          <div style="display: flex;flex-direction: row;">
            <div v-for="(item, index) in functions" :key="index" @click="functionAction(item)"
            :style="{'color': item.select? '#007aff': '#333', 'border': item.select?'1px solid #007aff':'1px solid #999'}"
            style="width: 80px;height: 35px;text-align: center;line-height: 35px;margin-left: 10px;cursor:pointer;">{{ item.title }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="富文本" name="richtext">
          <div>
            <Editor v-model="richtext" :height="600" />
          </div>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-left: 100px;margin-top: 20px;">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from '@/components/Editor';
import selectItem from './selectItem.vue';
import selectItemList from './selectItemList.vue';
import {tools} from '@/utils/tools.js'
export default {
  components: {Editor, selectItem, selectItemList},
  props:{
    
  },
  data() {
      return {
        richtext: '',
        isShow: false,
        currentTab: 'itemList',
        functions: [{'title': '创业中心', 'name': 'businessCenter', 'modal': 'push'}, 
        {'title': '商家中心', 'name': 'takeout', 'modal': 'push'}, 
        {'title': '会员商户', 'name': 'shopList', 'modal': 'push'},
        {'title': '活动列表', 'name': 'activityList', 'modal': 'push'}],
        currentFun: {}
      }
  },
  created(){
      if(this.$route.query.richtext){
        this.richtext = this.$route.query.richtext
      }
  },
  methods: {
    show(){
      this.isShow = true
    },
    close(){
      this.isShow = false
    },
    // 功能点击事件
    functionAction(item){
      this.$set(this.currentFun, 'select', false)
      this.$set(item, 'select', true)
      this.currentFun = item

    },
    tabClick(e){
      console.log('tabClick', e)
      this.currentTab = e.name
      switch (this.currentTab) {
        case 'item':
          // this.$refs.selectItem.formKey = 'filterItem'
          // this.$refs.selectItem.getFormData()
          break;
        case 'itemList':
          // this.$refs.selectItemList.formKey = 'filterItem'
          // this.$refs.selectItemList.getFormData()
          break;
        default:
          break;
      }
    },
    confirm(){
      var link = {}
      var query = {}
      switch (this.currentTab) {
        case 'richtext':
          link.name = 'protocolView'
          link.modal = 'push'
          query.content = this.richtext
          break;
        case 'function':
          link.name = this.currentFun.name
          link.modal = this.currentFun.modal
          break;
        case 'item':
          if(!this.$refs.selectItem.selectedItem.id){
            this.$message.error('请选择商品');
            return
          }
          link.name = 'itemDetail'
          link.modal = 'push'
          query = {
            itemId: this.$refs.selectItem.selectedItem.id
          }
          break;
        case 'itemList':
          if(!this.$refs.selectItemList.itemFilter){
            this.$message.error('请选择筛选条件');
            return
          }
          link.name = 'itemList'
          link.modal = 'push'
          query = tools.paramsToObj(this.$refs.selectItemList.itemFilter)
          break;
          
        default:
          break;
      }
      this.$emit('handleSelect', JSON.stringify(link), JSON.stringify(query))
      this.isShow = false
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
